<!DOCTYPE html>

<html>
<head>
    <title>#{get 'title' /}</title>
    <meta charset="${_response_encoding}">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="@{'/public/javascripts/semantic.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/main.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{get 'moreScripts' /}
    <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/semantic.css'}">
    <link rel="stylesheet" media="only screen and (min-width: 768px), only screen and (min-device-width: 768px)" href="@{'/public/stylesheets/main.css'}">
    <link rel="stylesheet" media="only screen and (max-width: 767px), only screen and (max-device-width: 767px)" href="@{'/public/stylesheets/main_mobile.css'}">
#{get 'moreStyles' /}
<body>
#{hautpage /}
    #{menupublic /}
    <div id="main">
          <div class="ui stackable grid">
                    <div class="three wide relaxed column" id="menuconnexion">
                        <div class="ui form">
                        <form id="formconnexion" action="@{Application.seconnecter()}" method="post">
                        #{if erreur }
                            <div id="message_failed_seconnecter" class="ui primary inverted red segment">Votre compte n'existe pas</div>
                        #{/if}
                        <div class="field">
                            <label>Votre email</label>
                            <div class="ui left labeled icon input">
                                <input placeholder="Email" type="text" name="emailform">
                                <i class="user icon"></i>
                                <div class="ui corner label">
                                    <i class="icon asterisk"></i>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <label>Votre mot de passe</label>
                            <div class="ui left labeled icon input">
                                <input id="password_connexion" type="password" placeholder="Mot de passe" name="motdepasseform">
                                <i class="lock icon"></i>

                                <div class="ui corner label">
                                    <i class="icon asterisk"></i>
                                </div>
                            </div>
                        </div>
                            <div class="ui vertical buttons">
                            <button class="ui small button" type="submit"  id="boutonSeconnecter">
                                <i class="sign in icon"></i>Se connecter
                            </button>
                            <div class="ui small button" id="boutonSinscrire">
                                <i class="smile icon"></i>S'inscrire
                            </div>
                        </div>
                        </form>
                        </div>
                    </div>
                    <div class="thirteen wide column" id="contenu">
                    #{doLayout /}
                    </div>
          </div>
    </div>
#{piedpage /}
<div class="ui small modal">
    <i class="close icon">Close</i>
    <div class="header">
        Votre inscription
    </div>
    <div id="message_success_sinscrire" class="ui primary inverted blue segment">Vous avez crée un compte!!!</div>
    <div id="message_failed_sinscrire" class="ui primary inverted red segment">Vous avez une erreur de creation d'un compte!!!</div>
    <div class="content" >
        <form id="formInscript" action="" method="post">
            <div class="ui error form segment">
                <div class="two fields">
                    <div class="field">
                        <label>Prénom</label>
                        <input placeholder="Prénom" type="text" name="prenom">
                    </div>
                    <div class="field">
                        <label>Nom</label>
                        <input placeholder="Nom" type="text" name="nom">
                    </div>
                </div>
                <div class="two fields">
                    <div class="field">
                        <label>Date de naissance</label>
                        <input placeholder="Date de naissance" type="text" name="date" id="date" >
                    </div>
                    <div class="field">
                        <label>Sexe</label>
                        <div id="sexe_dropdown"  class="ui fluid selection dropdown">
                            <input name="sexe" type="hidden">
                            <div id="default_sexe_value" class="default text">M</div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item" data-value="M">M</div>
                                <div class="item" data-value="F">F</div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="field">
                    <label>Email</label>
                    <input placeholder="Email" type="email" name="email">
                </div>
                <div class="field">
                    <label>Mot de passe</label>
                    <input type="password" placeholder="Mot de passe" name="motdepasse">
                </div>
                <button type="submit" class="ui small blue button" id="boutonValidationSinscrire">
                    Valider
                </button>
            </div>
        </form>
    </div>
</div>
</body>
</html>